<template>
  <section class="brief">
    <p class="brief-title">生物识别(Biometrics)</p>
    <img class="img" src="@/assets/images/skillSummary/image235.png" lazy-load />
    <img class="img margin" src="@/assets/images/skillSummary/Group190.png" lazy-load />
    <p class="brief-subtitle margin">生物识别的要求事项</p>
    <div class="table">
      <p>
        <span>特点</span>
        <span>虹膜</span>
        <span>指纹</span>
        <span>脸部</span>
        <span>静脉</span>
      </p>
      <p>
        <span>普遍性</span>
        <span>
          <i></i>
        </span>
        <span>
          <i></i>
        </span>
        <span>
          <i></i>
        </span>
        <span>
          <i></i>
        </span>
      </p>
      <p>
        <span>唯一性</span>
        <span>
          <i></i>
        </span>
        <span>
          <i class="empty">
            <i class="half"></i>
          </i>
        </span>
        <span>
          <i class="empty"></i>
        </span>
        <span>
          <i></i>
        </span>
      </p>
      <p>
        <span>永续性</span>
        <span>
          <i></i>
        </span>
        <span>
          <i class="empty">
            <i class="half"></i>
          </i>
        </span>
        <span>
          <i class="empty"></i>
        </span>
        <span>
          <i class="disabled"></i>
        </span>
      </p>
      <p>
        <span>获得性</span>
        <span>
          <i></i>
        </span>
        <span>
          <i></i>
        </span>
        <span>
          <i></i>
        </span>
        <span>
          <i></i>
        </span>
      </p>
    </div>
    <p class="brief-title">虹膜的特点</p>
    <p class="brief-subTitle">IRIS</p>
    <img class="img" src="@/assets/images/skillSummary/Group159.png" lazy-load />
    <img class="img" src="@/assets/images/skillSummary/image90.png" lazy-load />
    <ul>
      <li>· 人体中最复杂精巧的纤维组织</li>
      <li>· 位于瞳孔和巩膜之间</li>
      <li>· 和相机的光圈具有同等作用</li>
      <li>· 所有人的虹膜纹路均不同</li>
      <li>· 不只是双胞胎，本人的左右眼虹膜纹路也不同</li>
    </ul>
    <p class="brief-title">虹膜图像转换过程</p>
    <img class="img" src="@/assets/images/skillSummary/Frame392.png" lazy-load />
    <ul>
      <li>
        <p>1. 虹膜纹路相同的概率（唯一性）</p>
        <p>
          人的指纹相同的概率为 1/109
          (10亿分之一1)，在生物学角度，虹膜纹路相同的概率为 1/1078，
          可以看作为0
          %。不只是双胞胎，每个人的左右眼的虹膜纹路都不相同。
        </p>
      </li>
      <li>
        <p>2. 虹膜纹路的形成（永久性）</p>
        <p>与随着时间流逝会发生轻微变化的其他生物体不同，虹膜纹路是在出生前20个月就形成，且虹膜纹路一生都不会发生改变。</p>
      </li>
      <li>
        <p>3. 与眼睛疾病相关的关系</p>
        <p>眼睛疾病和虹膜识别是无关的，如死亡或者眼球被摘取时，瞳孔会扩大，所以无法进行虹膜识别。</p>
      </li>
      <li>
        <p>4. 非接触式识别</p>
        <p>与其他活体识别不同，因为虹膜识别是完全采用非接触式识别，可以不用担心因活体接触而导致的病毒感染。</p>
      </li>
    </ul>
    <p class="brief-title">虹膜识别技术的优缺点</p>
    <div class="table other">
      <p>
        <span>Technologies</span>
        <span>长处</span>
        <span>缺点</span>
      </p>
      <p>
        <span>指纹识别</span>
        <span>费用低廉</span>
        <span>易伪造，看不见指纹或者有指纹损坏的情况</span>
      </p>
      <p>
        <span>脸部识别</span>
        <span>便捷、迅速识别</span>
        <span>受到照明及姿势的影响,准确度低</span>
      </p>
      <p>
        <span>掌纹、掌状识别</span>
        <span>快捷获取信息</span>
        <span>处理速度缓慢，根据姿势不同，准确率低</span>
      </p>
      <p>
        <span>静脉识别</span>
        <span>不可复制</span>
        <span>难提取，识别时间相对较长</span>
      </p>
      <p>
        <span>RFID卡</span>
        <span>安装费用低廉，便捷快速识别</span>
        <span>盗用、可伪造性高、易损伤、维护费用高</span>
      </p>
      <p>
        <span>虹膜识别</span>
        <span>不可伪造、处理速度快、损伤可能性低</span>
        <span>对系统的性能要求较高</span>
      </p>
    </div>
    <p class="brief-title">生物识别技术比较</p>
    <ul class="desc">
      <li v-for="(item, index) in list" :key="index">
        <p class="title">{{item.title}}</p>
        <div>
          <div class="left">
            <span>误识别率：{{item.text1}}</span>
            <span>识别速度：{{item.text2}}</span>
            <span>盗用可能性：{{item.text3}}</span>
            <span>识别资料：{{item.text4}}</span>
            <span>识别：{{item.text5}}</span>
            <span>技术水准：{{item.text6}}</span>
          </div>
          <img :src="item.img" />
        </div>
        <p>备注：{{item.text7}}</p>
      </li>
    </ul>
  </section>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
interface editFormDataType {
  title: string
  text1: string
  text2: string
  text3: string
  text4: string
  text5: string
  text6: string
  text7: string
  img: string
}
const list: editFormDataType[] = reactive([
  {
    title: '虹膜识别',
    text1: '0.00000001',
    text2: '0.5~1s',
    text3: '不可能',
    text4: '虹膜纹路',
    text5: '稳定的',
    text6: '优秀',
    text7: '最佳的生物识别技术 安保性强',
    img: new URL(
      `../../../assets/images/skillSummary/image236.png`,
      import.meta.url
    ).href,
  },
  {
    title: '指纹识别',
    text1: '0.001~0.0001',
    text2: '1s',
    text3: '可能',
    text4: '指纹',
    text5: '不稳定',
    text6: '通用技术',
    text7: '易变形，易伪造',
    img: new URL(
      `../../../assets/images/skillSummary/image-237.jpg`,
      import.meta.url
    ).href,
  },
  {
    title: '静脉识别',
    text1: '0.000001',
    text2: '2s',
    text3: '不可能',
    text4: '血管(静脉)',
    text5: '不稳定',
    text6: '优秀',
    text7: '根据温度、湿度、位置 的不同，识别不够稳定',
    img: new URL(
      `../../../assets/images/skillSummary/image238.png`,
      import.meta.url
    ).href,
  },
  {
    title: '脸部识别',
    text1: '3.0',
    text2: '1s',
    text3: '可能',
    text4: '面部形态',
    text5: '稳定',
    text6: '通用技术',
    text7: '根据照明变化、变形、眼 镜等因素，识别不够稳定',
    img: new URL(
      `../../../assets/images/skillSummary/image-239.jpg`,
      import.meta.url
    ).href,
  },
  {
    title: '掌纹识别',
    text1: '0.00001',
    text2: '2s',
    text3: '可能',
    text4: '手掌 等等',
    text5: '不稳定',
    text6: '通用技术',
    text7: '因自身变形，温度 和湿度等识别不稳定',
    img: new URL(
      `../../../assets/images/skillSummary/image240.png`,
      import.meta.url
    ).href,
  },
  {
    title: 'RFID卡',
    text1: '高',
    text2: '0.5s',
    text3: '可能',
    text4: 'RFID芯片',
    text5: '稳定',
    text6: '通用技术',
    text7: '盗用可能性及 损伤可能性高',
    img: new URL(
      `../../../assets/images/skillSummary/image241.png`,
      import.meta.url
    ).href,
  },
])
</script>

<style lang="scss" scoped>
.brief {
  &-title {
    font-size: 44px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    color: #2087e3;
    margin: 60px 0;
  }
  .margin {
    margin: 40px 0;
  }
  &-subtitle {
    font-family: Source Han Serif CN, Source Han Serif CN-Bold;
    font-weight: 700;
  }
  .table {
    border: 1px solid #c9c9c9;
    p {
      display: flex;
      justify-content: space-between;
      span {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 14px;
        border-bottom: 1px solid #c9c9c9;
        border-right: 1px solid #c9c9c9;
        &:last-child {
          border-right: 0;
        }
      }
      &:last-child {
        span {
          border-bottom: 0;
        }
      }
      i {
        display: flex;
        width: 16px;
        height: 16px;
        background-color: #2087e3;
        border-radius: 50%;
        &.empty {
          border: 1px solid #5da2e1;
          border-radius: 50%;
          background-color: #fff;
        }
        &.disabled {
          background-color: #c4c4c4;
        }
        .half {
          position: absolute;
          height: 14px;
          width: 7px;
          border-radius: 7px 0 0 7px;
        }
      }
    }
    &.other {
      p {
        &:first-child {
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
          span {
            font-size: 28px;
          }
        }
        span {
          font-size: 24px;
          &:first-child {
            font-size: 28px;
          }
        }
        &:last-child {
          color: #2087e3;
          font-weight: 500;
        }
      }
    }
  }
  &-subTitle {
    font-size: 32px;
    font-family: DIN, DIN-Bold;
    font-weight: 700;
    margin-bottom: 34px;
    text-align: center;
  }
  ul {
    margin-top: 20px;
    li {
      font-size: 28px;
      line-height: 48px;
      color: #666666;
      p {
        &:first-of-type {
          color: #2087e3;
        }
      }
    }
  }
  .desc {
    li {
      font-size: 32px;
      color: #686868;
      margin-bottom: 40px;
      .title {
        font-family: Source Han Sans CN, Source Han Sans CN-Bold;
        font-weight: 700;
        color: #333333;
        margin-bottom: 20px;
      }
      div {
        display: flex;
        justify-content: space-between;
        .left {
          flex-direction: column;
        }
      }
      img {
        width: 264px;
        height: 244px;
        margin-right: 22px;
      }
      &:first-child {
        color: #2087e3;
        .title {
          color: #2087e3;
        }
      }
    }
  }
}
</style>